<template>
  <div class="tong">
    <uni-icons type="info" class="info" color="red" size="30"></uni-icons>
    <div class="on">发布本条消息将消费10元</div>
  </div>
  <uni-list-chat
    title="上传照片"
    note="只能上传房屋图片，不能含有文字、数字、网址、名片、水印等，所有类别图片共计20张。"
    avatarCircle
    badge-positon="left"
    :clickable="true"
    @click="Update"
  >
    <image
      class="imgs"
      src="http://10.31.71.52:7002/public/static/pubImage/chuan.png"
      mode="scaleToFill"
    />
    <view class="chat-custom-right">
      <!-- 需要使用 uni-icons 请自行引入 -->
      <uni-icons type="forward" color="#999" size="20" class="icon"></uni-icons>
    </view>
  </uni-list-chat>

  <div class="one">
    <div
      class="one_1"
      v-for="(item, index) in zujian"
      :key="index"
      @click="navigate(item.id)"
    >
      <div class="l">
        <p class="p1">{{ item.name }}</p>
        <p class="pp">{{ item.title }}</p>
      </div>
      <div class="r">
        <uni-icons
          :type="item.icon"
          color="#999"
          size="20"
          class="icons"
        ></uni-icons>
      </div>
    </div>
  </div>
  <div class="two">
    <div class="l1" @click="navHuxing">
      <div class="two_1">
        <p class="p1">户型 | 朝向 | 装修</p>
        <p class="pp">
          {{ huxing ? huxing : "请选择" }} {{ chao ? chao : "请选择" }}
          {{ zhuang ? zhuang : "请选择" }}
        </p>
      </div>
      <div class="two_2">
        <uni-icons
          type="forward"
          color="#999"
          size="20"
          class="icons"
        ></uni-icons>
      </div>
    </div>
    <div class="r1">
      <span style="margin-right: 15px">所在楼层</span
      ><span style="margin-right: 10px">请填写</span> <span></span
      ><input class="uni-inputs" type="number" @click="inps" /> <span>层</span>
      <span>共</span><span style="margin-right: 15px">请填写</span>
      <span><input @click="inps" class="uni-inputs" type="number" /></span>
      <span>层</span>
    </div>
  </div>

  <div class="three">
    <div class="one_1" v-for="(item, index) in mian" :key="index">
      <div class="l">
        <p class="p1">{{ item.name }}</p>
        <p class="pp" @click="inps">
          <input class="uni-input" type="number" placeholder="请输入" />
        </p>
      </div>
      <div class="r">
        <p
          class="icons"
          style="color: #999; font-size: 12px; margin-right: 13px"
        >
          {{ item.icon }}
        </p>
      </div>
    </div>
  </div>

  <view class="four">
    <view
      style="
        font-size: 12px;
        color: #ccc;
        box-sizing: border-box;
        padding: 10px;
      "
      >标签</view
    >
    <view class="four_1">
      <view v-for="(item, index) in fang" :key="index"> {{ item }}</view>
    </view>
    <view class="four_1 four_2">
      <view v-for="(item, index) in didi" :key="index"> {{ item }}</view>
    </view>
  </view>

  <div class="three">
    <div class="one_1" v-for="(item, index) in desc" :key="index">
      <div class="l">
        <p class="p1">{{ item.name }}</p>
        <p class="pp" @click="inps">
          <input class="uni-input" :focus="true" placeholder="请输入" />
        </p>
      </div>
      <div class="r">
        <uni-icons
          :type="item.icon"
          color="#999"
          size="20"
          class="icons"
        ></uni-icons>
      </div>
    </div>
  </div>

  <view class="five">
    <div class="one_1">
      <div class="l">
        <p class="p1">联系人</p>
        <p class="pp" @click="inps" style="color: #000">
          <input class="uni-input" :focus="true" placeholder="梦想^_" />
        </p>
      </div>
      <div class="r">
        <uni-icons
          type="forward"
          color="#999"
          size="20"
          class="icons"
        ></uni-icons>
      </div>
    </div>
  </view>

  <view class="six">
    <view style="font-size: 12px">联系电话</view>
    <view><input class="uni-input" type="number" placeholder="请输入" /></view>
  </view>
  <view class="seven">
    <view class="se" style="font-weight: bold; font-size: 12px">有效时间</view>
    <view class="seday">30天</view>
  </view>

  <view class="eight">
    <view class="e1">
      <checkbox-group>
        <label>
          <checkbox
            value="cb"
            :checked="alltab"
            color="#FFCC33"
            style="transform: scale(0.7)"
            @click="checks"
          />
          已阅读并接受 《宏烨找房网房源信息发布规则》
        </label>
      </checkbox-group>
    </view>
    <view>
      <button type="primary" class="btn" @click="zhifu">发布并支付</button>
    </view>
  </view>
  <monent v-show="mone" @clone="clone"></monent>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";

const mone = ref(false);
const alltab = ref(false);
const xuandi = ref("");
// 拿到本地存的数据
const dizhi = uni.getStorageSync("xiaoqu");
const types = uni.getStorageSync("types");
const qulist = uni.getStorageSync("quyu");
const huxing = uni.getStorageSync("huxing");
const chao = uni.getStorageSync("chao");
const zhuang = uni.getStorageSync("zhuang");
xuandi.value = dizhi;
//拿到类型参数
const typeData = ref("");
typeData.value = types;
//拿到房间区域数据
const quData = ref("");
quData.value = qulist;
//户型朝向装饰
const hus = ref("");
hus.value = huxing;
const ch = ref("");
ch.value = chao;
const xiu = ref("");
xiu.value = zhuang;
//拿到回退页面参数
onLoad((options) => {
  console.log(options, "============>参数");
  typeData.value = options.data;
});

// 区域数据
let zujian = reactive([
  {
    id: 1,
    name: "小区",
    title: xuandi.value ? xuandi.value : "请选择小区",
    icon: "forward",
    path: "/subpkg/xiaoqu/xiaoqu",
  },
  {
    id: 2,
    name: "房产类型",
    title: typeData.value ? typeData.value : "请选择",
    icon: "forward",
    path: "/subpkg/typese/typese",
  },
  {
    id: 3,
    name: "校区域区",
    title: quData.value ? quData.value + "区" : "请选择",
    icon: "forward",
    path: "/subpkg/quyu/quyu",
  },
]);

// 面积数据
let mian = reactive([
  {
    id: 1,
    name: "面积",
    title: "请输入",
    icon: "m2",
  },
  {
    id: 2,
    name: "售价",
    title: "请输入",
    icon: "万元",
  },
]);

// 低总价
let didi = reactive([
  "低总价",
  "满两年",
  "满五年",
  "随时看房",
  "满五唯一",
  "低首付",
  "两室朝阳",
  "精装",
  "南北通透",
  "品质小区",
]);

// 新上房源
let fang = reactive(["新上房源", "小户型", "有电梯", "优质教育"]);

// 简介
let desc = reactive([
  {
    id: 1,
    name: "标题",
    title: "请输入",
    icon: "forward",
  },
  {
    id: 2,
    name: "描述",
    title: "请输入",
    icon: "forward",
  },
]);

//上传页面
const Update = () => {
  uni.navigateTo({
    url: "/components/update/update",
    success: (result) => {
      console.log(result);
    },
  });
};

// 跳转路由
const navigate = (id) => {
  const paths = zujian.find((item) => item.id === id);
  console.log(paths);
  uni.redirectTo({
    url: paths.path,
  });
};
//跳转到户型朝向
const navHuxing = () => {
  uni.navigateTo({ url: "/subpkg/huxing/huxing" });
};

//点击按钮显示弹框
const inps = () => {
  mone.value = true;
};

//点击空白关闭
const clone = (e) => {
  console.log(e, "===================>e");
  mone.value = e;
};

//取反单选框
const checks = () => {
  alltab.value = !alltab.value;
};

//支付页面
const zhifu = () => {
  if (alltab.value === true) {
    uni.navigateTo({ url: "/subpkg/zhifu/zhifu" });
  } else {
    uni.showToast({
      title: "请选中后在支付",
      icon: "error",
      duration: 2000,
    });

    // message.error('请选中后支付') // 正确 success, 错误 error)
  }
};
</script>

<style lang="scss">
.tong {
  width: 100vw;
  height: 40px;
  background-color: #f7e2e6;
  color: red;
  display: flex;
  line-height: 40px;
  .info {
    margin-left: 20px;
  }
}

.uni-list-chat__container {
  position: relative;
  height: 90px;
}

.imgs {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 50px;
  height: 50px;
}
.icon {
  position: relative;
  top: 8px;
}
.one {
  width: 100vw;
  height: 303px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
}
.one_1 {
  width: 100vw;
  height: 100px;
  border-bottom: 1px solid #e3e1e1;
  display: flex;
  .l {
    width: 90%;
    height: 100%;
    color: #c5c2c2;
    line-height: 50px;
    box-sizing: border-box;
    padding-left: 20px;
    .pss {
      font-size: 20px;
      color: #000 !important;
    }
    .pp {
      color: #000;
      font-size: 20px;
    }
  }
  .r {
    width: 10%;
    height: 100%;
    .icons {
      text-align: center;
      line-height: 100px;
    }
  }
}

.two {
  width: 100vw;
  height: 101px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  .l1 {
    width: 100vw;
    height: 60%;
    box-sizing: border-box;
    border-bottom: 1px solid #e3e1e1;
    color: #c5c2c2;
    line-height: 25px;
    padding-left: 20px;
    display: flex;
    .two_1 {
      width: 90%;
      height: 100%;
      .p1 {
        font-size: 14px;
      }
    }
    .two_2 {
      width: 10%;
      height: 100%;
      line-height: 80px;
    }
    .pp {
      color: #000;
      font-size: 20px;
    }
  }
  .r1 {
    width: 100%;
    height: 40%;
    color: #c5c2c2;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;
    .uni-inputs {
      width: 20px;
      height: 20px;
    }
  }
}

.three {
  width: 100vw;
  height: 202px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
}
.four {
  width: 100vw;
  height: 235px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  .four_1 {
    display: flex;
    flex-wrap: wrap;
    view {
      box-sizing: border-box;
      padding: 5px;
      border: 1px solid #e3e1e1;
      color: #403f3f;
      margin-left: 15px;
      margin-top: 5px;
    }
  }
  .four_2 {
    margin-top: 25px;
  }
}

.five {
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
}
.six {
  width: 100vw;
  height: 50px;
  background-color: #fff;
  margin-top: 10px;
  box-sizing: border-box;
  padding-left: 15px;
  view {
    margin-top: 10px;
  }
}

.seven {
  width: 100vw;
  height: 100px;
  background-color: #fff;
  margin-top: 15px;
  overflow: hidden;
  .se {
    margin-top: 15px;
    margin: 10px 20px 10px 20px;
  }
  .seday {
    width: 100px;
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 2px;
    text-align: center;
    line-height: 40px;
    color: #aaa;
    margin-left: 20px;
  }
}
.eight {
  width: 100vw;
  height: 200px;
  overflow: hidden;
  .e1 {
    font-size: 12px;
    margin-top: 80px;
    margin-left: 25px;
    margin-bottom: 20px;
  }
  .btn {
    width: 80%;
    background-color: #fe636b;
    border-radius: 25px;
  }
}
</style>
